<template>
	<view class="box-01">

<button class="button" type="primary" @click="toggle('center')"><text class="button-text">确认门店的弹窗</text></button>
<!-- 普通弹窗 -->

<uni-popup ref="popup" background-color="#fff" @change="change">

<view class="popup-content, box-01" :class="{ 'popup-height': type === 'left' || type === 'right' }">

	<image @click="onclose" class="img-01" src="../../static/wu/esc.png" mode="widthFix"></image>
		<view class="box-02">请再次确认下单门店</view>
		<view class="box-03"><text>茶百道午后吾悦广场店</text>
			<text class="text-1">400米</text>
		</view>
		<view class="
		.box-04"> <text class="text-2">四川省成都市武侯区簇锦街道武侯大道顺江东路79号茶百道</text>
			<view class="text-3">更换门店</view>
		</view>
		<view class="text-4"><buttom>确认付款并下单</buttom></view>
</view>

</uni-popup> 
	</view>
	
	
</template>

<script>
	export default {
	  methods: {
	    toggle(type) {
			// this.type = type
			console.log("123",this.$refs.popup);
	    this.$refs.popup.open(type);
	    },
		
			
		onclose(){
			this.$refs.popup.close(false)
		}
	  },

	}
	
	
</script>


<style>
	.text-4 {
		background-color: #1e4fbe;
		height: 90rpx;
		width: 500rpx;
		margin: auto;
		border-radius: 50rpx;
		position: fixed;
		left: 50%;
		margin-left: -250rpx;
		color: white;
		line-height: 90rpx;
		margin-top: 60rpx;
	}

	.box-04 {
		display: flex;
		align-items: center;
	}

	.text-3 {
		width: 140rpx;
		height: 37rpx;
		font-size: 26rpx;
		border: 1rpx solid #2f5670;
		color: #2f5670;
		margin-left: 37rpx;
	}

	.text-2 {
		width: 540rpx;
		font-size: 26rpx;
	}

	.text-1 {
		color: #9c9c9c;
	}

	.box-03 {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}

	.box-02 {
		font-size: 38rpx;
		margin: auto;
		margin-bottom: 43rpx;
	}

	.img-01 {
		width: 38rpx;
		margin-left: 540rpx;
	}

	.box-01 {
		width: 580rpx;
		height: 458rpx;
		background-color: w;
		margin: auto;
		padding: 56rpx 15rpx 60rpx 15rpx;
		text-align: center;
	}
</style>
